<template>
  <a-modal
    title="详情"
    :width="900"
    v-model="modelVisible"
    :destroyOnClose="true"
    :confirmLoading="confirmLoading"
    centered
    :footer="null"
    :maskClosable="false"
  >
    <a-form :form="form">
      <a-row class="form-row" type="flex">
        <a-col :span="10" :offset="1" style="padding-top:5px;">
          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="执行人/单位"
          >{{ selectInfo.zxrstr }}</a-form-item>
        </a-col>
        <a-col :span="10">
          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="工作类别"
          >{{ gzlbEcho(selectInfo.gzlb) }}</a-form-item>
        </a-col>
        <a-col :span="10" :offset="1" v-if="qdShow" style="padding-top:5px;">
          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="清单类型"
          >{{ qdlxEcho(selectInfo.qdlx) }}</a-form-item>
        </a-col>
        <!-- <a-col :span="10" :offset="1">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="清单类型">
              <a-input v-model="selectInfo.qdlx" :disabled="operate==='detile'?'disabled':false" />
            </a-form-item>
        </a-col>-->
        <a-col :span="20" :offset="1" style="padding-top:5px;">
          <a-form-item
            :labelCol="{xs: { span: 12 },sm: { span: 4 }}"
            :wrapperCol="{xs: { span: 12 },sm: { span: 20 }}"
            label="工作内容"
          >{{ selectInfo.gznr }}</a-form-item>
        </a-col>
        <a-col :span="20" :offset="1" style="padding-top:5px;">
          <a-row>
            <a-col :span="12">
              <a-form-item
                :labelCol="{xs: { span: 12 },sm: { span: 8 }}"
                :wrapperCol="{xs: { span: 12 },sm: { span: 16 }}"
                label="周期性工作"
              >{{ sfszqxgzEcho(selectInfo.sfszqxgz) }}</a-form-item>
            </a-col>
            <a-col :span="12" v-if="zqShow">
              <a-form-item
                :labelCol="{xs: { span: 12 },sm: { span: 8 }}"
                :wrapperCol="{xs: { span: 12 },sm: { span: 16 }}"
                label="周期"
              >{{ zqEcho(selectInfo.zq) }}</a-form-item>
            </a-col>
          </a-row>
        </a-col>
        <a-col :span="20" :offset="1" style="padding-top:5px;" v-if="zdyzqShow">
          <a-form-item
            :labelCol="{xs: { span: 12 },sm: { span: 4 }}"
            :wrapperCol="{xs: { span: 12 },sm: { span: 20 }}"
            label="自定义周期"
          >{{ selectInfo.zdyzq }}</a-form-item>
        </a-col>
        <a-col :span="10" :offset="1" style="padding-top:5px;">
          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="开始日期"
          >{{ selectInfo.kssj }}</a-form-item>
        </a-col>
        <a-col :span="10">
          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="截止日期"
          >{{ selectInfo.jzsj }}</a-form-item>
        </a-col>
        <a-col :span="10" :offset="1" style="padding-top:5px;">
          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="责任单位"
          >{{ selectInfo.zrdw }}</a-form-item>
        </a-col>
        <a-col :span="10">
          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="责任人">{{ selectInfo.zrr }}</a-form-item>
        </a-col>
        <a-col :span="20" :offset="1" style="padding-top:5px;">
          <a-form-item
            :labelCol="{xs: { span: 12 },sm: { span: 4 }}"
            :wrapperCol="{xs: { span: 12 },sm: { span: 20 }}"
            label="质量要求"
          >{{ selectInfo.zlyq }}</a-form-item>
        </a-col>
        <a-divider>打卡记录</a-divider>
        <a-col :span="22" :offset="1">
          <a-spin :spinning="tableLoading">
            <a-table bordered :columns="columns" :data-source="workClockList">
              {{ text }}
            </a-table>
          </a-spin>
        </a-col>
      </a-row>
    </a-form>
  </a-modal>
</template>
<script>
import { mapGetters } from 'vuex'
import { query } from '@/api/admin'

export default {
  components: {},
  computed: {
    ...mapGetters(['userInfo'])
  },
  data () {
    return {
      form: this.$form.createForm(this),
      modelVisible: false, // 弹出框显示
      confirmLoading: false, // Loading
      tableLoading: false,
      selectInfo: {},
      labelCol: {
        xs: { span: 24 },
        sm: { span: 8 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      qdShow: false,
      zqShow: false,
      zdyzqShow: false,
      workClockList: [],
      columns: [
        {
          title: '打卡日期',
          dataIndex: 'dksj',
          key: 'dksj',
          width: 180
        },
        {
          title: '打卡内容',
          dataIndex: 'bz',
          key: 'bz',
          ellipsis: true,
          scopedSlots: { customRender: 'bz' }
        }
      ]
    }
  },
  created () {},
  methods: {
    open (record) {
      const vm = this
      this.selectInfo = record
      const sfszqxgz = record.sfszqxgz ? record.sfszqxgz : '2'
      record.sfszqxgz = sfszqxgz
      if (sfszqxgz === '1') {
        this.zqShow = true
      } else {
        this.zqShow = false
      }
      const zdyzq = record.zdyzq ? record.zdyzq : ''
      if (zdyzq === '6') {
        this.zdyzqShow = true
      } else {
        this.zdyzqShow = false
      }
      const gzlb = record.gzlb ? record.gzlb : ''
      if (gzlb === '2') {
        this.qdShow = true
      } else {
        this.qdShow = false
      }
      this.modelVisible = true
      this.tableLoading = true
      // let actionParam = {
      //   // 请求参数
      //   url: "/par/parworkclock/list",
      //   action: "GET",
      //   parameter: record,
      //   data: {},
      //   message: "删除成功"
      // };
      // // 调用请求
      // method(actionParam).then(res => {
      // });
      // 获取打卡记录
      query('/par/parworkinfo/listClock', 'GET', record).then(res => {
        vm.workClockList = res.result.data
        vm.tableLoading = false
      })
    },
    // 工作类别回显
    gzlbEcho (text) {
      if (text === '1') {
        return '指令性工作'
      } else if (text === '2') {
        return '目标任务问题清单'
      } else if (text === '3') {
        return '个人工作备忘'
      }
    },
    // 工作状态回显
    gzztEcho (text) {
      if (text === '1') {
        return '已完成'
      } else if (text === '0') {
        return '未完成'
      }
    },
    // 派发状态回显
    pfztEcho (text) {
      if (text === '1') {
        return '已派发'
      } else if (text === '0') {
        return '未派发'
      }
    },
    // 是否周期性工作回显
    sfszqxgzEcho (text) {
      if (text === '1') {
        return '是'
      } else if (text === '2') {
        return '否'
      }
    },
    // 清单类型回显
    qdlxEcho (text) {
      if (text === '1') {
        return '问题清单'
      } else if (text === '2') {
        return '任务清单'
      } else if (text === '3') {
        return '工作清单'
      }
    },
    // 周期回显
    zqEcho (text) {
      if (text === '1') {
        return '年'
      } else if (text === '2') {
        return '季度'
      } else if (text === '3') {
        return '月'
      } else if (text === '4') {
        return '周'
      } else if (text === '5') {
        return '日'
      } else if (text === '6') {
        return '自定义'
      }
    }
  }
}
</script>
<style scoped>
.text-overflow {
  display: block; /*内联对象需加*/
  word-break: keep-all; /* 不换行 */
  white-space: nowrap; /* 不换行 */
}
</style>
<style>
.ant-popover-inner {
  width: auto;
}
</style>
